<template>
  <div>
    <div class="title">事件总览</div>
    <el-row>
      <el-col
        :span="4"
        v-for="(item, index) in tab"
        :key="index"
        :class="item.isActive ? 'active' : ''"
        @click.native="handleClick(index)"
      >
        <span class="tabname">{{ item.name }}</span>
      </el-col>
    </el-row>

    <div class="date">
      <el-date-picker
        v-model="defaultRange"
        type="datetimerange"
        range-separator="-"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        @change="handleChange"
      >
      </el-date-picker>
    </div>

    <div
      v-show="chartShow"
      id="myChart"
      class="animate__animated animate__fadeInLeft"
    ></div>
    <el-table
      v-show="tshow"
      :data="myTable"
      style="width: 95%"
      height="230px"
      class="animate__animated animate__fadeInLeft"
    >
      <el-table-column prop="REGION_NAME" label="村社名称" width="200">
      </el-table-column>
      <el-table-column prop="VALUE" label="事件数量" width="150">
      </el-table-column>
      <el-table-column prop="RANK" label="排名" width="140"> </el-table-column>
    </el-table>
  </div>
</template>

<script>
import "echarts-wordcloud";
import {
  getTownEventBasic,
  getTownEventTrend,
  getTownEventRank,
  getTownEventType,
  getEventGPC,
} from "../../utils/api";
export default {
  name: "eventOverview",
  data() {
    return {
      tab: [
        {
          name: "事件总览",
          isActive: true,
        },
        {
          name: "事件趋势",
          isActive: false,
        },
        {
          name: "事件排名",
          isActive: false,
        },
        {
          name: "事件分类",
          isActive: false,
        },
        {
          name: "事件研判",
          isActive: false,
        },
      ],
      sel: 0,
      echart: [],
      startTime: this.Tebs.getBeforeDate(29) + " 00:00:00",
      endTime: this.Tebs.date2String_OnlyDate(new Date()) + " 23:59:59",
      defaultRange: [],
      myChart: null,
      xData: [],
      yData: [],
      tshow: false,
      chartShow: true,
      wordCloudShow: false,
      myTable: [],
      // yhadd
      keyword: [],
      mycolor: [
        "#9FE6B8",
        "#32C5E9",
        "#FFDB5C",
        "#FF9F7F",
        "#FB7293",
        "#E7BCF3",
        "#8378EA",
      ],
      currentIndex: 0,
      currentTab: 0,
      timer: null,
    };
  },
  mounted() {
    this.defaultRange = [this.startTime, this.endTime];

    let me = this;
    getTownEventBasic(
      "startTime=" + this.startTime + "&endTime=" + this.endTime
    ).then((res) => {
      if (res.data.status === 200) {
        me.echart = res.data.data;
        me.setEchart();
      }
    });
    this.timeCount();
  },
  methods: {
    setEchart() {
      if (this.myChart !== null) {
        this.myChart.dispose();
      }
      this.myChart = this.$echarts.init(document.getElementById("myChart"));
      var datalist = [];
      for (var i = 0; i < this.echart.length; i++) {
        if (this.echart[i].value != 0) {
          datalist.push(this.echart[i]);
        }
      }
      this.myChart.setOption({
        legend: {
          width: 40,
          right: 20,
          top: 30,
          textStyle: {
            color: "#fff",
            fontFamily: "SourceHanSansCN-Regular",
            padding: [3, 0],
          },
        },
        color: [
          "#8378EA",
          "#E7BCF3",
          "#FB7293",
          "#FF9F7F",
          "#FFDB5C",
          "#32C5E9",
          "#32C5E9",
        ],
        series: [
          {
            type: "pie",
            radius: [30, 80],
            center: ["35%", "50%"],
            roseType: "area",
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: "insideRight",
                  formatter: function (params) {
                    return "{value|" + params.value + "}";
                  },
                  rich: {
                    value: {
                      color: "#fff",
                      fontFamily: "SourceHanSansCN-Regular",
                      fontSize: 20,
                    },
                  },
                },
                smooth: 1,
                labelLine: {
                  show: true,
                  length: 20,
                  maxSurfaceAngle: 10,
                },
              },
            },
            data: datalist,
          },
        ],
      });
    },

    setEchart2() {
      if (this.myChart !== null) {
        this.myChart.dispose();
      }
      this.myChart = this.$echarts.init(document.getElementById("myChart"));
      this.myChart.setOption({
        grid: {
          top: 40,
          left: 40,
          bottom: 40,
          right: 20,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.xData,
          axisLine: {
            lineStyle: {
              color: "#fff",
            },
          },
        },
        yAxis: {
          type: "value",
          axisLine: {
            lineStyle: {
              color: "#fff",
            },
          },
          splitLine: {
            //网格线
            show: false,
          },
        },
        series: [
          {
            data: this.yData,
            type: "line",
            areaStyle: {},
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "#08D79A", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "rgba(36, 255, 211, 0)", // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
          },
        ],
      });
    },

    setEchart3() {
      var that = this;
      if (this.myChart !== null) {
        this.myChart.dispose();
      }
      this.myChart = this.$echarts.init(document.getElementById("myChart"));
      this.myChart.setOption({
        tooltip: {
          show: true,
        },
        series: [
          {
            type: "wordCloud", //类型为字符云
            // shape: "smooth", //平滑
            gridSize: 15, //网格尺寸
            shape: "star",
            rotationRange: [-20, 20], //旋转范围
            sizeRange: [15, 40], // 最小字体和最大字体
            width: "90%",
            height: "90%",
            textStyle: {
              normal: {
                color: function () {
                  var currentColor = that.mycolor[that.currentIndex];
                  that.currentIndex++;
                  if (that.currentIndex == 6) {
                    that.currentIndex = 0;
                  }
                  return currentColor;
                },
              },
              emphasis: {
                shadowBlur: 5, //阴影距离
                shadowColor: "#333", //阴影颜色
              },
            },
            data: this.keyword,
          },
        ],
      });

      this.myChart.on("click", function (params) {
        // 监听点击，params.data.name
      });
    },
    handleClick(index) {
      this.currentTab = index;
      this.timeCount();
      // 关闭之前的高亮，当前点击的高亮显示
      this.tab[this.sel].isActive = false;
      this.sel = index;
      this.tab[index].isActive = true;
      let me = this;
      switch (index) {
        case 0:
          me.tshow = false;
          me.chartShow = true;
          getTownEventBasic(
            "startTime=" + this.startTime + "&endTime=" + this.endTime
          ).then((res) => {
            if (res.data.status === 200) {
              me.echart = res.data.data;
              me.setEchart();
            }
          });

          break;
        case 1:
          me.tshow = false;
          
          getTownEventTrend(
            "startTime=" + this.startTime + "&endTime=" + this.endTime
          ).then((res) => {
            if (res.data.status === 200) {
              me.xData = res.data.data.xData;
              me.yData = res.data.data.yData;
              me.chartShow = true;
              this.setEchart2();
            }
          });
          break;
        case 2:
          getTownEventRank(
            "startTime=" + this.startTime + "&endTime=" + this.endTime
          ).then((res) => {
            if (res.data.status === 200) {
              me.myTable = [];
              for (let i = 0, l = res.data.data.length; i < l; i++) {
                me.myTable.push({
                  REGION_NAME: res.data.data[i].REGION_NAME,
                  VALUE: res.data.data[i].VALUE,
                  RANK: i + 1,
                });
              }
              me.tshow = true;
              me.chartShow = false;
            }
          });
          break;
        case 3:
          me.tshow = false;
          me.chartShow = true;
          getTownEventType(
            "startTime=" +
              this.startTime +
              "&endTime=" +
              this.endTime +
              "&eventType=矛调协同平台"
          ).then((res) => {
            if (res.data.status === 200) {
              me.echart = res.data.data;
              me.setEchart();
            }
          });
          break;

        // 高频词分析（yhadd）
        case 4:
          me.tshow = false;
          me.chartShow = true;
          getEventGPC(
            "startTime=" + this.startTime + "&endTime=" + this.endTime
          ).then((response) => {
            me.keyword = response.data.data;
            this.setEchart3();
          });
          break;
      }
    },
    handleChange(value) {
      this.startTime = this.Tebs.date2String_OnlyDate(value[0]) + " 00:00:00";
      this.endTime = this.Tebs.date2String_OnlyDate(value[1]) + " 23:59:59";
      this.handleClick(this.sel);
    },

    // 定时器
    timeCount() {
      if(this.timer){
        clearInterval(this.timer);
      }
      this.timer = setInterval(() => {
        this.currentTab++;
        if (this.currentTab == 5) {
          this.currentTab = 0;
        }
        this.autoClick(this.currentTab);
      }, 30000);
    },
    
    // 定时器触发自动切换
    autoClick(index) {
      // 关闭之前的高亮，当前点击的高亮显示
      this.tab[this.sel].isActive = false;
      this.sel = index;
      this.tab[index].isActive = true;
      let me = this;
      switch (index) {
        case 0:
          me.tshow = false;
          me.chartShow = true;
          getTownEventBasic(
            "startTime=" + this.startTime + "&endTime=" + this.endTime
          ).then((res) => {
            if (res.data.status === 200) {
              me.echart = res.data.data;
              me.setEchart();
            }
          });

          break;
        case 1:
          me.tshow = false;
          me.chartShow = true;
          getTownEventTrend(
            "startTime=" + this.startTime + "&endTime=" + this.endTime
          ).then((res) => {
            if (res.data.status === 200) {
              me.xData = res.data.data.xData;
              me.yData = res.data.data.yData;
              this.setEchart2();
            }
          });
          break;
        case 2:
          getTownEventRank(
            "startTime=" + this.startTime + "&endTime=" + this.endTime
          ).then((res) => {
            if (res.data.status === 200) {
              me.myTable = [];
              for (let i = 0, l = res.data.data.length; i < l; i++) {
                me.myTable.push({
                  REGION_NAME: res.data.data[i].REGION_NAME,
                  VALUE: res.data.data[i].VALUE,
                  RANK: i + 1,
                });
              }
              me.tshow = true;
              me.chartShow = false;
            }
          });
          break;
        case 3:
          me.tshow = false;
          me.chartShow = true;
          getTownEventType(
            "startTime=" +
              this.startTime +
              "&endTime=" +
              this.endTime +
              "&eventType=矛调协同平台"
          ).then((res) => {
            if (res.data.status === 200) {
              me.echart = res.data.data;
              me.setEchart();
            }
          });
          break;

        // 高频词分析（yhadd）
        case 4:
          me.tshow = false;
          me.chartShow = true;
          getEventGPC(
            "startTime=" + this.startTime + "&endTime=" + this.endTime
          ).then((response) => {
            me.keyword = response.data.data;
            this.setEchart3();
          });
          break;
      }
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.title {
  width: 300px;
  height: 60px;
  background-image: url("../../assets/image/global/title.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  line-height: 60px;
  font-size: 24px;
  font-style: oblique;
  color: #fff;
  padding-left: 40px;
  margin-top: 10px;
}
.el-row {
  margin-top: 10px;
}
.el-col-4 {
  width: 100px;
  height: 45px;
  /* width: 125px;
  height: 45px; */
  background-image: url("../../assets/image/left/tab.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-left: 6px;
  color: #cbcbcb;
  text-align: center;
  cursor: pointer;
}
.tabname {
  font-size: 18px;
  line-height: 45px;
}
.el-row .active {
  color: #fff;
  background-image: url("../../assets/image/left/tab_active.png");
}

.el-range-editor {
  background: linear-gradient(
    0deg,
    rgba(22, 79, 58, 0.7),
    rgba(5, 35, 29, 0.7)
  );
  border: 1px solid #0affbd;
  box-shadow: 0px 0px 8px 0px rgba(2, 45, 33, 0.46);
  opacity: 0.8;
  width: 94%;
  margin-left: 3%;
  margin-top: 10px;
}
#myChart {
  width: 95%;
  margin: auto;
  height: 240px;
}
.wordCloud {
  width: 95%;
  margin: auto;
  height: 240px;
}
.el-table {
  background: unset;
  margin: 5px auto;
}
</style>
